<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body>
		<div class="m-bidconfirm">
			<h3 class="header f-pr">
				<span>投资确认</span>
				<i class="icon-angle-left f-pa"></i>
			</h3>
			<div class="hd">
				<!-- 约标：新 -> 约 -->
				<p class="name"><i>新</i><span>新手标-2017030801</span></p>
				<ul class="binfo">
					<li>
						<p class="rate">10.5<small>%+4%</small></p>
						<p>预期年化收益</p>
					</li>
					<li>
						<p class="num">30<small>天</small></p>
						<p>投资期限</p>
					</li>
					<li>
						<p class="num">305,850.00</p>
						<p>剩余可投</p>
					</li>
				</ul>
				<p class="payway">还款方式：<span>一次性还款</span></p>
			</div>
			<ul class="ilist">
				<li>
					<label>账户余额</label>
					<span class="amount">305.05</span>
					<a class="op f-pa">充值</a>
				</li>
				<li>
					<label>投资金额</label>
					<!-- 正常标显示 -->
					<span>
						<input type="text" placeholder="请输入投资金额">
						<a class="op f-pa">全投</a>
					</span>
					<!-- 约标显示 -->
					<span class="hide">
						<span class="amount">305,850.00</span>
						<span class="unit">元</span>
					</span>
				</li>
			</ul>
			<ul class="ilist">
				<li>
					<label>使用红包</label>
					<!-- 有红包显示 -->
					<span id="coupon">
						<input type="text" value="使用10元红包" class="coupon" readonly="true">
						<i class="icon-angle-right f-fr"></i>
					</span>
					<!-- 无红包显示 -->
					<span class="no hide">暂无可用红包</span>
				</li>
				<li id="deduction">
					<label>本次抵扣</label>
					<span class="deduction">32.10元</span>
					<i class="qicon f-pa"></i>
				</li>
			</ul>
			<p class="acpay">实际支付：<span>2,000.00</span>元</p>
			<a class="btn">确认投资</a>
			<!-- 未选择添加 .uncicon -->
			<p class="tips"><i class="cicon"></i><span>我已阅读并同意<a>《无忧微贷借款协议》、《风险揭示书》</a></span></p>
		</div>

		<!-- 使用红包 -->
		<div class="overlay">
			<div class="use-coupon">
				<p class="title">使用红包</p>
				<ul class="clist">
					<li class="cur"><span>使用10元红包</span><i class="radio check"></i></li>
					<li><span>不使用红包</span><i class="radio"></i></li>
				</ul>
				<a class="close">关闭</a>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>

		<script type="text/javascript">
			// 未开户进入页面显示
			// mui.confirm('投资前要先开通资金托管账户，请先开户！', '提示', ['知道了', '去开户'], function(e){
			// 	if(e.index == 1){
			// 		//
			// 	}
			// });

			$('.btn').on('tap', function(){
				mui.confirm('账户可用余额小于投资余额，请先充值！', '提示', ['取消', '立即充值'], function(e){
					if(e.index == 1){
						//
					}
				});
			});

			$('#deduction').on('tap', function(){
				mui.openWindow({
					url: 'deduction.html',
					show: {
						aniShow: 'pop-in',
						event: 'loaded'
					}
				});
			});

			$('#coupon').on('tap', function(){
				$('.overlay, .use-coupon').addClass('active');
			});

			$('.close').on('tap', function(){
				$('.overlay, .use-coupon').removeClass('active');
			});

			$('.use-coupon .clist').on('tap', 'li', function(){
				$(this).children('.radio').addClass('check');
				$(this).siblings('li').children('.radio').removeClass('check')
				var text = $(this).children('span').text();
				$('.coupon').val(text);
				
				if(!$(this).hasClass('cur')){
					$(this).addClass('cur').siblings().removeClass('cur');
				}
			});
		</script>
	</body>
</html>